<template>
	<div class="body_inner">

		<div class="pw_change_page">
			<div class="page_top">
				<a href="/mypage"><i class="xi-arrow-left"></i></a>

				<div class="allMenu_btn" v-if="!allMenuShow" @click="allMenuShow = true">
					<div class="x"></div>
					<div class="y"></div>
					<div class="z"></div>
				</div>
				<div class="allMenu_btn open" v-if="allMenuShow" @click="allMenuShow = false">
					<div class="x coll rotate30 rotate45"></div>
					<div class="y coll" style="display: none;"></div>
					<div class="z coll rotate150 rotate135"></div>
				</div>
			</div>

			<div class="page_contents">
				<h3>
					비밀번호 변경
					<p>새로운 비밀번호를 입력해주세요.</p>
				</h3>

				<form action="" class="form_boundary">
					<div>
						<p>새 비밀번호(필수)</p>
						<input type="password" v-model="password">
					</div>

					<div>
						<p>새 비밀번호 확인(필수)</p>
						<input type="password" v-model="repassword">
					</div>

					<p class="infoTxt">
						<i class="xi-info"></i>
						비밀번호는 영문, 숫자, 특수문자의 조합으로 된 3~15자리로 생성해야 합니다.
					</p>
					<p class="infoTxt">
						<i class="xi-info"></i>
						허용된 특수문자 : ‘!’, ‘@’, ‘#’, ‘$’. ‘%’, ‘^’, ‘&’, ‘+’, ‘=’
					</p>
					<p class="infoTxt">
						<i class="xi-info"></i>
						비밀번호를 변경시 등록된 휴대전호 번호로 보인 인증이 진행됩니다.
					</p>

					<div class="btn open_modal" @click="confimPass()">변경하기</div>
				</form>
			</div>
		</div>

		<nav id="allMenu" v-if="allMenuShow">
			<ul>
				<li>
					<a href="/main">
						<p><i class="xi-home"></i>홈</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking">
						<p><i class="xi-bank"></i>상품 구매</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking_sum">
						<p><i class="xi-credit-card"></i>상품 구매 합계</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/interest">
						<p><i class="xi-piggy-bank"></i>데일리내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_apply">
						<p><i class="xi-money"></i>출금신청</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_list">
						<p><i class="xi-wallet"></i>출금/송금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/recommender">
						<p><i class="xi-group"></i>추천인 목록</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/mypage">
						<p><i class="xi-profile-o"></i>마이페이지</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>
			</ul>

			<div class="btn" @click="logout()">로그아웃</div>
		</nav>
	</div>
</template>
<script>
	import axios from "axios";
	export default {
		data() {
			return {
				repassword: "",
				password: '',
				idcard: '',
				allMenuShow: false
			};
		},
		created() {
			this.idcard = this.$route.query.user_no;
		},
		methods: {
			confimPass() {
				var _this = this;
				if (_this.repassword != _this.password) {
					alert('비밀번호가 두 번 일치하지 않습니다.');
					return;
				}
				axios.post('https://admintest.pdt-daily.com/api/login/update_password', {
					user_no: _this.idcard,
					new_password: _this.password
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.$router.push('/login')
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			logout() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/logout', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						alert('로그아웃 되었습니다.');
						localStorage.setItem('token', '');
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			}
		},
	};
</script>